<template>
  <!-- 我的订单内容 -->
  <div class="mydoing">
    <!-- 订单信息 -->
    <div class="doing-box" v-for="(item,index) in myOrderArr" :key="index">
      <div class="order-info">
        <div class="info-item">
          <!-- 标题 -->
          <div class="info-item--left">{{item.oid}}</div>
          <div class="info-item-right" @click="received(item.oid,index)">
            确认收货
        
          </div>
        </div>
        <div class="search-box-item" v-for="(iten,sum) in item.data" :key="sum">
          <!-- 图片 -->
          <div class="item-img" @click="viewDetail(iten.pid)">
            <img class="auto-img" :src="iten.smallImg" />
          </div>

          <div class="item-title-box">
            <div class="item-title-top">
              <!-- 商品的中文名字 -->
              <div class="item-zhtitle">
                <div class="title-name">{{iten.name}}</div>
                <div class="title-style">{{iten.rule}}</div>
              </div>
              <div class="item-entitle">{{iten.enname}}</div>
            </div>

            <div class="item-title-bot">
              <div class="item-price">¥{{iten.price}}</div>
              <div class="select-box">
                x
                <span>{{iten.count}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 合计 -->
      <div class="sum-info">
        <div class="sum-time">{{item.createdAt | dateFormat}}</div>
        <div class="sum-box">
          <div class="sum-count">
            小计
            <span>{{item.count}}</span>件
          </div>
          <div class="sum-price">
            总计
            <span>¥{{item.total}}</span>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: "MyDoing",
  props:{
    list:{
      type:Array,
    }
  },
  data() {
    return {
      //订单数据
      myOrderArr: [],
      status: 0
    };
  },
  
  mounted() {
    this.findOrder();

  },
 filters:{
   //将时间裁切
   dateFormat:function(createdAt) {
      //将字符串裁切
     let r=createdAt.slice(0,-5);
     //匹配T字符替换成空
     r=r.replace(/[T]/,' ');
     return r;
   }
 },
  
  methods: {
    //查询订单接口
    findOrder() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: this.status,
        
        }
      }).then((res) => {

        if(res.data.code==700) {
          this.$toast('您还未登录,请先登录');
        }
        if(res.data.code==70000) {
          let orderArray=res.data.result;
          //定义一个数组存入oid
          let myArr=[];
          //定义一个数组存入createdAt
          let myCreated=[];
          // 
          orderArray.forEach(v=>{
            myArr.push(v.oid);
            myCreated.push(v.createdAt);
          })
          //将oid数组去重
          myArr=Array.from([...new Set(myArr)]);
          // 
          myCreated=Array.from([...new Set(myCreated)]);
          
          //定义一个数组保存不同oid的数据
          let oidArr=[];
          //重新处理数据 myOrderArr的数据
          for(let i=0;i<myArr.length;i++){
            oidArr.push({
              oid: myArr[i],
              data:[],
              //数量
              count:0,
              //总价
              total:0,
              //订单创建时间
              createdAt:myCreated[i],
            })
            
            orderArray.forEach(v=>{
              // 与数组里的oid相同的项推入当前项的空数组里
              if(myArr[i]==v.oid) {
                oidArr[i].data.push(v);
              }
            })
          }
          // 
          //新的数据结构赋值给数组
          this.myOrderArr=oidArr;
          // 
          for(let j=0;j<this.myOrderArr.length;j++) {
            for(let k=0;k<this.myOrderArr[j].data.length;k++) {
              //计算一个oid下的商品件数
              this.myOrderArr[j].count+=this.myOrderArr[j].data[k].count;
              //计算总价
              this.myOrderArr[j].total+=this.myOrderArr[j].data[k].count*this.myOrderArr[j].data[k].price;
            }
            //总价保留两位小数
            this.myOrderArr[j].total=Number(this.myOrderArr[j].total).toFixed(2);
          }
        }
      });
    },
    
    //确认收货
    received(oid) {
      this.axios({
        method: "post",
        url: "/receive",
        data: {
          oid,
        },
      }).then((res) => {
        
        if (res.data.code === 80000) {
          this.status=1;
          this.findOrder();
        }
      });
    },
    

    // 查看商品详情
    viewDetail(pid) {
      this.$router.push({ name: "Detail", params: { pid } });
    },
    
    
  },
};
</script>

<style lang='less' scoped>
@import url("../assets/base.less");

.mydoing {
  .order-address {
    /deep/ .van-radio__icon {
      display: none;
    }
    /deep/ .van-address-item__address {
      color: #888;
    }
  }
  /deep/ .van-address-item__edit {
    display: none;
  }
  /deep/ .van-address-item {
    height: 110px;
  }
  /deep/ .van-radio {
    margin-top: 40px;
  }

  /deep/ .van-address-list {
    padding: 0;
    margin-bottom: 10px;
  }
  /deep/ .van-tag--danger {
    background-color: @mainColor;
  }
  /deep/ .van-button--danger {
    background-color: @mainColor;
    border-color: @mainColor;
  }
}
.doing-box {
  margin-top: 10px;
}
.order-info {
  padding: 10px 10px;
  margin-bottom: 2px;
  border-radius: 10px;
  background-color: #fff;
  border-bottom: 1px dashed #e8e8e8;
}
.info-item {
  padding: 10px 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-box-item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.item-img {
  width: 100px;
  height: 100px;
  margin: 0 10px;
  background-color: @mainColor;
}
.item-title-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .item-title-top {
    .item-zhtitle {
      display: flex;
      .title-name {
        font-size: 14px;
        margin-right: 15px;
      }
      .title-style {
        font-size: 14px;
        color: #999;
      }
    }
    .item-entitle {
      margin-top: 5px;
      font-size: 12px;
      color: #999;
    }
  }
  .item-title-bot {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-right: 30px;
    .item-price {
      font-size: 16px;
      color: @priceColor;
      font-weight: bold;
    }
  }
}
.sum-info {
  padding: 10px;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  .sum-time {
    font-size: 12px;
    padding: 10px 0;
    color: #999;
    text-align: left;
  }
  .sum-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    .sum-count {
      color: #999;
      span {
        padding: 0 5px;
      }
    }
    .sum-price {
      // color:#215CE9;
      color: @priceColor;
      font-weight: bold;
      span {
        padding: 0 5px;
      }
    }
  }
}
// .total-box {

//     padding: 10px 10px;
//     display: flex;
//     justify-content: space-between;
//     align-items: center;
//     font-size:14px;
//     margin-top: 20px;
//     background-color: rgba(0,0,0,.2);
//     .sum-count {
//       color:#999;
//       span {
//         padding: 0 5px;
//       }
//     }
//     .sum-price {
//       // color:#215CE9;
//       color:@priceColor;
//       font-weight: bold;
//       span {
//         padding: 0 5px;
//       }
//     }
// }
</style>